<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
	<style>

.center {
  top: 50%;
  left: 50%;
}

.card {
  width: 100%;
  height: 250px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  position: relative;
}

.card h1 {
  text-align: center;
}

.card .additional {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#337ab7, #fefefe);
  transition: width 0.5s;
  overflow: hidden;
  z-index: 2;
}

.card .additional .user-card {
  width: 150px;
  height: 100%;
  position: relative;
  float: left;
}

.card .additional .user-card::after {
  content: "";
  display: block;
  position: absolute;
  top: 10%;
  right: -2px;
  height: 80%;
  border-left: 2px solid rgba(0,0,0,0.025);*/
}

.card .additional .user-card img {

  left: 20%;
  bottom: 30%;
  width: 60%;
  border-radius: 60%;
  position: absolute;

}

.card .additional .more-info {
  position: relative;
  top: 28%;
  height: 50%;
  margin: 0 auto;
  width: 50%;
  padding-left: 150px;
  padding-top: 1%;
}

.card .additional .more-info h1 {
  color: #fff;
  margin-bottom: 0;
  margin: 0 1rem;
  font-size: 2rem;
  position: relative;
}

.card .additional .coords {
  margin: 0 1rem;
  color: #fff;
  font-size: 1rem;
  position: relative;
  top: 10%;
  text-align: center;
  overflow: hidden;
  line-height: 20px;
}

.card .general {
  width: auto;
  height: 100%;
  position: relative;
  margin-left: 150px;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1rem;
  padding-top: 0;
}

.card .general h1 {
  font-size: 30px;
  text-align: center;
  margin-left: -12%;
  padding-top: 5px;
}

.card .general .dler-info {
	top: 5%;
  width: auto;
  display: flex;
  position: relative;
}

.card .general .dler-title {
  font-weight: bold;
  color: #444;
  font-size:15px;
  display: inline-block;
  width: 45%;
  overflow: hidden;
  vertical-align:bottom;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 25px;
  height: 25px;
}
        
.card .general .dler-result {
  color: #444;
  font-size:16px;
  white-space: nowrap;
  display: inline-block;
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align:bottom;
  text-align: right;
  line-height: 25px;
  height: 25px;
}

.card .general .dler-result2 {
  color: #444;
  font-size:16px;
  white-space: nowrap;
  display: inline-block;
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align:bottom;
  text-align: right;
  line-height: 25px;
  height: 25px;
}

.card .general .btn {
  color: #fff;
  border-color: #337ab7;
  background: #1473e6;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  width: 90px;
  height: 90px;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  overflow: hidden;
  -webkit-appearance:button;
}

.card .general .more {
  float: right;
  top: 85%;
  right: 20px;
  font-size: 15px;
  height: 15%;
  position: absolute;
  display: inline-block;
  overflow: hidden;
}
	</style>
</head>
<body>
<fieldset class="cbi-section">
<table width="100%"><tr><td>
<div class="center">
  <div id="card" class="card">
    <div id="additional" class="additional">
      <div class="user-card">
        <div class="img">
          <img id="dler_logo" src="" loading="lazy" title="Dler Cloud" alt="Dler Cloud" onerror="return imgerrorfuns(this,this.src)" onclick="return show_more()" />
        </div>
      </div>
      <div class="more-info" id="more_info">
        <h1>Dler Cloud</h1>
        <div class="coords" id="dler_it">
        	<%:Simple & trustworthy%>
        </div>
      </div>
    </div>
    <div class="general">
      <h1 id="dler-plan" ></h1>
      	<div class="dler-info">
      		<div style="width: 35%">
            <p style="margin: 10px -22% 10px 22%">
                <span class="dler-title"><%:Plan Expiration Time%>:</span><span class="dler-result" id="dler-plantime"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -22% 10px 22%">
                <span class="dler-title"><%:Account Balances%>:</span><span class="dler-result" id="dler-money"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -22% 10px 22%">
                <span class="dler-title"><%:Aff Balances%>:</span><span class="dler-result" id="dler-affmoney"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -22% 10px 22%">
                <span class="dler-title"><%:Account Integral%>:</span><span class="dler-result" id="dler-integral"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 35%">
            <p style="margin: 10px -28% 10px 28%">
                <span class="dler-title"><%:Today Used%>:</span><span class="dler-result2" id="dler-today-used"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -28% 10px 28%">
                <span class="dler-title"><%:Plan Used%>:</span><span class="dler-result2" id="dler-used"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -28% 10px 28%">
                <span class="dler-title"><%:Plan Unused%>:</span><span class="dler-result2" id="dler-unused"><%:Collecting data...%></span>
            </p>
            <p style="margin: 10px -28% 10px 28%">
                <span class="dler-title"><%:Plan Traffic%>:</span><span class="dler-result2" id="dler-traffic"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 30%; text-align:center">
        		<p style="margin: 30px 0 10px 39%">
        			<input type="button" class="btn" value="<%:Checkin%>" onclick="return dler_checkin_btn(this)"
        		</p>
        	</div>
        </div>
    		<div>
       	 <p class="more">Powered by <a style="text-decoration: none; color: #666" onclick="return web_dler()" href="javascript:void(0);">dlercloud.com</a></p>
    		</div>
      </div>
    </div>
  </div>
</div>
</td></tr></table>
</fieldset>
</body>

<script type="text/javascript">//<![CDATA[
	var dler_plan = document.getElementById('dler-plan');
	var dler_plantime = document.getElementById('dler-plantime');
	var dler_money = document.getElementById('dler-money');
	var dler_affmoney = document.getElementById('dler-affmoney');
	var dler_today_used = document.getElementById('dler-today-used');
	var dler_used = document.getElementById('dler-used');
	var dler_unused = document.getElementById('dler-unused');
	var dler_traffic = document.getElementById('dler-traffic');
	var dler_integral = document.getElementById('dler-integral');
	var dler_checkin = document.getElementById('dler-checkin');
	var obj = document.getElementById("additional");
  var card = document.getElementById("card");
  var dler_it = document.getElementById("dler_it");
  var more_info = document.getElementById("more_info");
  var dler_logo = document.getElementById("dler_logo");
  var showmore=1;
   
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if (x && x.status == 200 && status.dler_info != "error") {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			show_info();
		}
		else {
			show_less();
		}
	});
	
	XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if (x && x.status == 200 && status.dler_info != "error") {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			if (showmore != 0) {
			   show_info();
			}
			else {
			   show_less();
		  }
		}
		else {
			show_less();
		}
	});
	
function dler_checkin_btn(btn)
{
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_checkin")%>', null, function(x, status) {
		if ( x && x.status == 200 && status.dler_checkin != "error") {
			if (status.dler_checkin.ret == 200) {
				alert("<%:Dler Cloud Checkin Successful, Result:%>\n\n"+
				status.dler_checkin.data.checkin);
			}
			else if (status.dler_checkin.msg) {
				alert("<%:Dler Cloud Checkin Failed, Result:%>\n\n"+
				status.dler_checkin.msg);
			}
			else {
				alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
			}
		}
		else {
			alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
		}
	});
}
	
function web_dler()
{
   url='https://bit.ly/32mrABp';
   window.open(url);
}
       
function show_more()
{
	 if (obj.style.width == "150px") {
	    show_less();
	    showmore=0;
	 }
	 else {
	    if (dler_plan.value != "") {
         show_info();
         showmore=1;
		  }
		  else {
		     web_dler();
      }
	 }
}

function show_less()
{
   if (obj.style.width != "100%") {
      obj.style.width = "100%";
      obj.style.borderRadius = "0 5px 5px 0";
      card.style.height = "250px";
      more_info.style.display = "";
      more_info.style.transform = "translateY(11%)";
   }
   var rdmdl=Math.floor(Math.random()*6)+1;
   if(rdmdl==1)
   {
      dler_it.innerHTML = '<%:Simple & trustworthy%>';
   }
   if(rdmdl==2)
   {
      dler_it.innerHTML = '<%:Cross-platform Support%>';
   }
   if(rdmdl==3)
   {
      dler_it.innerHTML = '<%:Global Acceleration Network%>';
   }
   if(rdmdl==4)
   {
      dler_it.innerHTML = '<%:Easy to Use%>';
   }
   if(rdmdl==5)
   {
      dler_it.innerHTML = '<%:Intelligent Shunting%>';
   }
   if(rdmdl==6)
   {
      dler_it.innerHTML = '<%:Perfect Technical Support%>';
   }
}

function show_info()
{
   if (obj.style.width != "150px") {
      obj.style.width = "150px";
      obj.style.borderRadius = "0 0 0 0";
      card.style.height = "250px";
      more_info.style.display = "none";
   }
}

function imgerrorfuns(imgobj,imgSrc)
{
   setTimeout(function(){
      imgobj.src=imgSrc;
   },1000*10);
}

//]]></script>
</html>